<template>
  <div class="rebate_table">
    <tab :tabs="[{name: 'msg', text: '询货消息'}]"  activeName="msg"></tab>
    <section class="inquiry_box" v-if="inquiryList.length > 0">
      <div class="inquiry_head">
        <span class="head_item head_name">商品信息</span>
        <span class="head_item txt-center">询货数量</span>
        <span class="head_item txt-center">库存状态</span>
        <span class="head_item txt-center">操作</span>
      </div>
      <ul class="inquiry_cont">
        <li class="inquiry_li" v-for="(item, index) in inquiryList" :key="index">
          <span class="cont_name">
            {{item.goodsName}}<em> - ({{item.brand}})</em><br>
            {{item.productName}}
          </span>
          <span class="cont_item txt-center">{{item.consultNumber}}</span>
          <span class="cont_item txt-center color-blue" v-if="item.consultStatus === 0">库存待咨询</span>
          <span class="cont_item txt-center" v-else>
          {{item.inventoryStatusDesc}}</span>
          <span class="cont_item txt-center" >
            <el-button type="primary" size="small" @click.native="showProNumDialog(item)">加入购物车</el-button></span>
        </li>
      </ul>
    </section>
    <div class="no-content" v-else>还没有消息哦~</div>
    <!-- pagination -->
    <el-row v-if="pageObj && pageObj.totalPages > 1">
      <el-pagination class="page_box"  layout="total, prev, pager, next, ->"  :total="pageObj.totalRecords" :page-size="pageObj.pageSize" @current-change="handlePage" ></el-pagination>
    </el-row>
    <!-- 加入购物车数量输入 -->
    <el-dialog  title="加入购物车数量" :visible.sync="increaseVisible" width="380px" center top="20vh">
      <el-form :model="increaseProNum" ref="ruleForm" class="demo-ruleForm" style="text-align: center;">
        <el-form-item style="margin-top: 10px;">
          <el-input-number class="input-num-self" 
          @keydown.110.native.prevent=""
          v-model="increaseProNum.count" 
          :min="1" :max="9999" 
          ref="refInput"
          :step="step"
          @change="handleInputNum"></el-input-number>
          <p class="color-red" v-show="errorObj.status">{{errorObj.text}}</p>
        </el-form-item>
          <el-button type="primary" size="small" class="btn-add-to-shop" @click="addToShop">确定</el-button>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {Pagination, Table, TableColumn, Button, Row, Col, Dialog, Form, FormItem, InputNumber} from 'element-ui'
  import {tab} from '@/components/index'
  import {stock} from '@/tool/index'
  import {getConsultList, changeProNumber} from '@/service/get-data'
  import {mapActions} from 'vuex'
  import {getCookie} from '@/config/mUntils'
  import {eventBus} from '@/tool/events-bus'

  export default {
    components: {
      elPagination: Pagination,
      elTable: Table,
      elTableColumn: TableColumn,
      elButton: Button,
      elRow: Row,
      elCol: Col,
      elDialog: Dialog,
      elForm: Form,
      elFormItem: FormItem,
      elInputNumber: InputNumber,
      tab
    },
    data () {
      return {
        page: 1,
        pageSize: 10,
        inquiryList: [],
        pageObj: {},
        increaseVisible: false,
        errorObj: { // 错误信息
          text: '请输入正确的数量,最多输入4位',
          status: false
        },
        increaseProNum: {
          proId: '', // 货品的id
          count: 1 // 添加货品的数量
        },
        step: 1
      }
    },
    computed: {
      stock () {
        return stock
      },
      Exam () {
        return getCookie('Exam') - 0
      }
    },
    methods: {
      ...mapActions(['fetchCartList']),
      // 获取询货列表
      async fetchConsultList () {
        let res = await getConsultList(this.page, this.pageSize)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.inquiryList = res.data.list
          this.pageObj = res.data.page
        }
      },
      // 分页
      handlePage (page) {
        this.page = page
        this.fetchConsultList()
      },
      // 弹出购物车对话框
      showProNumDialog (obj) {
        let status = obj.inventoryStatus
        if (status === 3) {
          this.$message.error({
            message: '此商品缺货不能加入购物车'
          })
          return
        }
        this.step = obj.packingNum
        this.increaseVisible = true
        this.increaseProNum.proId = obj.productId
      },
      // 计数器的change
      handleInputNum () {
        let leftNum = this.increaseProNum.count
        let lastNum = leftNum % this.step
        leftNum = lastNum === 0 ? leftNum : leftNum - lastNum + this.step
        this.increaseProNum.count = leftNum
        this.$nextTick(() => {
          this.$refs.refInput.$refs.input.setCurrentValue(leftNum)
        })
      },
      // 加入购物车 改变货品的数量
      async addToShop () {
        let number = parseInt(this.increaseProNum.count)
        if (number > 0 && number < 9999) {
          this.shopcartId = this.$store.state.shopcart.shopCartId
          if (!this.shopcartId) { // 如果不存在id 请求购物车
            this.fetchCartList()
            this.shopcartId = this.$store.state.shopcart.shopCartId
          }
          let res = await changeProNumber(this.shopcartId, this.increaseProNum.proId, '', number, 0)
          if (res.data.resultCode === 2000) {
            this.errorObj.status = false
            this.errorObj.text = ''
            this.fetchCartList() // 更新购物车列表
            this.increaseVisible = false // 隐藏数量弹窗
            this.increaseProNum.count = 1
            // this.$message({message: '已经添加货品的数量到购物车'})
            eventBus.$emit('show:pop')
          }
        } else {
          this.errorObj.status = true
          this.errorObj.text = '输入数量在0~9999范围内'
        }
      }
    },
    mounted () {
      if (this.Exam !== 1) return
      this.fetchConsultList()
    },
    filters: {
      consultS (value) {
        let result = value === 1 ? '询货完成' : '询货中'
        return result
      },
      statusName (state) {
        const stateArr = ['库存不足', '库存紧张', '库存正常', '库存充足', '库存待咨询', '库存咨询中']
        return stateArr[state]
      }
    }
  }
</script>

<style lang="scss" scoped>
  .inquiry_head{
    padding: 15px 0;
    font-size: 14px;
    color: #474747;
    background: #ffffff;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    justify-content: space-around;
    .head_item{
      flex: 1;
    }
    .head_name{
      flex: 1.5;
      padding-left: 40px;
    }
  }
  .inquiry_li{
    display: flex;
    justify-content: space-around;
    height: 65px;
    padding: 10px 0;
    font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #e8e8e8;
    .cont_item{
      flex: 1;
      display: inline-block;
      line-height: 65px;
      button{
        color: #303030;
        border-radius: 4px;
      }
    }
    .cont_name{
      flex: 1.5;
      padding-left: 40px;
      padding-top: 10.5px;
      line-height: 22px;
    }
  }
</style>
